import React, { useRef, useState } from 'react';
import {
  Form,
  Input,
  InputNumber,
  Button,
  MessagePlugin,
  Radio,
  DatePicker,
  Switch,
  TreeSelect,
  Select,
  Upload,
  Cascader,
  Textarea,
  Space,
} from 'tdesign-react';
import Card from 'tdesign-react/es/card/Card';
import { FormInstanceFunctions, SubmitContext } from 'tdesign-react/es/form/type';
import { addEmployee } from '../../../api/employee';

const { FormItem } = Form;

export default function BaseForm() {
  const formRef = useRef<FormInstanceFunctions>();
  const isUndefined = (data: any) => {
    // eslint-disable-next-line no-restricted-syntax
    for (const key in data) {
      if (data[key] === undefined) {
        return false;
      }
    }
    return true;
  };
  const onSubmit = async (e: SubmitContext) => {
    if (e.validateResult === true) {
      const addValue = formRef?.current?.getFieldsValue?.(true) as any;
      if (!isUndefined(addValue)) {
        MessagePlugin.error('信息不能为空');
        return;
      }
      addValue.avatar = addValue.avatar.length !== 0 ? addValue.avatar[0].response.name : '';
      addValue.sex = parseInt(addValue.sex, 10);
      const res = await addEmployee(addValue);
      if (res.data) {
        MessagePlugin.success(`添加${res.msg}`);
      } else {
        MessagePlugin.error(`添加${res.msg}`);
      }
      formRef?.current?.reset();
    }
  };

  const onReset = () => {
    formRef?.current?.reset();
    MessagePlugin.info('重置成功');
  };

  return (
    <>
      <Card>
        <Form ref={formRef} colon onReset={onReset} onSubmit={onSubmit} labelWidth={100}>
          <FormItem label='姓名' name='name' rules={[{ required: true, message: '名字必填', type: 'error' }]}>
            <Input placeholder='请输入名字' />
          </FormItem>
          <FormItem label='性别' name='sex'>
            <Radio.Group defaultValue='0'>
              <Radio value='0'>男</Radio>
              <Radio value='1'>女</Radio>
            </Radio.Group>
          </FormItem>
          <FormItem label='职位' name='work' rules={[{ required: true, message: '职位必填', type: 'error' }]}>
            <Input placeholder='请输入职位' />
          </FormItem>
          <FormItem label='电话' name='phone' rules={[{ required: true, message: '电话必填', type: 'error' }]}>
            <Input placeholder='请输入电话' />
          </FormItem>
          <FormItem
            label='家庭地址'
            name='address'
            rules={[{ required: true, message: '家庭地址必填', type: 'error' }]}
          >
            <Input placeholder='请输入家庭地址' />
          </FormItem>
          <FormItem label='生日' name='birthday' rules={[{ required: true, message: '生日必填', type: 'error' }]}>
            <DatePicker mode='date' clearable />
          </FormItem>
          <FormItem label='头像' name='avatar'>
            <Upload
              action='http://127.0.0.1:5000/upload/avatar'
              theme='image'
              tips='请选择单张图片文件上传'
              accept='image/*'
            ></Upload>
          </FormItem>
          <FormItem style={{ marginLeft: 100 }}>
            <Button theme='primary' type='submit' style={{ marginRight: 10 }}>
              添加
            </Button>
            <Button theme='default' variant='base' type='reset'>
              重置
            </Button>
          </FormItem>
        </Form>
      </Card>
    </>
  );
}
